<template>
  <div class="chat-list-table">
    <el-table v-loading="loading" :data="chatList" border style="width: 100%">
      <el-table-column label="发送者" width="180">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar :size="32" :src="row.lastMessage.fromAvatar"></el-avatar>
            <span class="ml-2">{{ userType(row.lastMessage.fromType,row.lastMessage.fromName)}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="接收者" width="180">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar :size="32" :src="row.lastMessage.toAvatar"></el-avatar>
            <span class="ml-2">{{ userType(row.lastMessage.toType, row.lastMessage.toName) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="lastMessage.content"
        label="最后消息"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="最后沟通时间" width="180">
        <template #default="{ row }">
          {{ new Date(row.lastMessage.time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleViewDetail(row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { getChatList } from "@/api/message";
import { ElMessage } from "element-plus";

const props = defineProps({
  userId: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["viewDetail"]);

const loading = ref(false);
const chatList = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const userType = (type, name)=>{
  switch(Number(type)){
    case 1:
      return `买家:${name}`
    case 2:
      return `卖家:${name}`
    case 3:
      return "技能猴子客服"
    default:
      return "-"
  }
}

// 获取聊天列表
const getChats = async () => {
  loading.value = true;
  try {
    const params = {
      user: props.userId,
      page: page.value,
      limit: pageSize.value,
    };
    const res = await getChatList(params);
    chatList.value = res.list;
    total.value = res.total;
  } catch (error) {
    console.error("获取聊天列表失败:", error);
    ElMessage.error("获取聊天列表失败");
  } finally {
    loading.value = false;
  }
};

// 查看详情
const handleViewDetail = (row) => {
  emit("viewDetail", row);
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  getChats();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  page.value = val;
  getChats();
};

// 监听用户ID变化
watch(
  () => props.userId,
  () => {
    if (props.userId) {
      page.value = 1;
      getChats();
    }
  }
);

onMounted(() => {
  if (props.userId) {
    getChats();
  }
});

// 暴露方法给父组件
defineExpose({
  refresh: getChats,
});
</script>

<style scoped>
.chat-list-table {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.user-info {
  display: flex;
  align-items: center;
}

.ml-2 {
  margin-left: 8px;
}
</style>
